<template>
    <div class="">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="auto">
          <el-form-item label="" prop="keyword">
            <el-input v-model="queryParams.keyword" placeholder="订单编号、活动名称、卡名称、姓名、手机号" clearable size="small" style="width: 320px;"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="发行方：" prop="issuerId">
             <el-select v-model="queryParams.issuerId" placeholder="请选择" clearable>
              <el-option v-for="item in issuerList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发行店铺：" prop="merchantId">
             <el-select v-model="queryParams.merchantId" placeholder="请选择" clearable>
              <el-option v-for="item in shopSeleteList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态：" prop="punchStatus">
             <el-select v-model="queryParams.punchStatus" placeholder="请选择" clearable >
              <el-option v-for="item in punchStatusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <div class="listBox">
        <div class="listBox_head">
           <export-excel-button :params="ExportParams" title="活动订单列表"  action="/shenye/limit/time/order/export" />
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
            <el-table-column label="序号" type="index" width="55" align="center" fixed />
            <el-table-column label="订单编号" align="center" prop="orderNo" :show-overflow-tooltip="true" />
            <el-table-column label="交易时间" align="center" prop="transactionTime" :show-overflow-tooltip="true" />
            <el-table-column label="打卡活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true" />
            <el-table-column label="发行方" align="center" prop="issuerName" :show-overflow-tooltip="true" />
            <el-table-column label="发行店铺" align="center" prop="shopName" :show-overflow-tooltip="true" />
            <el-table-column label="姓名" align="center" prop="customerName" :show-overflow-tooltip="true" />
            <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
            <el-table-column label="实付金额（￥）" align="center" prop="payMoney" :show-overflow-tooltip="true" />
            <el-table-column label="生效规则时间" align="center" prop="punchTime" :show-overflow-tooltip="true" />
            <el-table-column label="激励规则" align="center" prop="giveAmount" :show-overflow-tooltip="true" />
            <el-table-column label="任务进度" align="center"  prop="punchStatus" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>
  
  </template>
  
  <script>
    import {
      shenyeLimitTimeOrderList,
      getIssuerSelect,
      getShopSelect
    } from "@/api/blindBox/timeLimitActivities";
    import ExportExcelButton from "@/components/ExportExcelButton/index";

    export default {
      name: "Customer",
      components: {
        ExportExcelButton
      },
      data() {
        return {
          // 遮罩层
          loading: false,
          // 总条数
          total: 0,
          // 订单活动表格数据
          customerList: [],
          issuerList:[],//发行方列表
          shopSeleteList:[],//发行店铺
          punchStatusList:[],//订单状态
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            keyword: null, //订单编号、活动名称、卡名称、姓名、手机号
            issuerId: null, //请选择发行方	
            merchantId: null, //请选择发行店铺	
            punchStatus: null, //订单状态	
          },
          recordTypeList: [], //状态
        };
      },
      computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
     },
      created() {
        this.getadminDict()
        this.getShopSelectList()
        this.getIssuerSelecttList()
        this.getList();
      },
      methods: {
        getadminDict() {
        //获取商户类型字典
        var dictType = "shenye_limit_time_activity_punch_status";
        this.$getSelectList(dictType)
            .then((res) => {
            this.punchStatusList = res.result[0].dictList;
            })
        },
        //获取店铺下拉
        getShopSelectList(){
          getShopSelect().then(res => {
            this.shopSeleteList = res.result
          })
        },
        //发行方列表
        getIssuerSelecttList(){
          getIssuerSelect().then(res => {
            this.issuerList = res.result
          })
        },
        /** 查询列表 */
        getList() {
        //   console.log(this.type)
          this.loading = true;
          shenyeLimitTimeOrderList(this.queryParams).then(response => {
              this.loading = false;
              this.total = response.result.total
              this.customerList = response.result.records
              this.customerList = this.customerList.map(item => {
                // console.log('item',item)
                Object.keys(item).forEach(key => {
                  if (item[key] === '') {
                    item[key] = '-'
                  }
                })
                return item
              })
            }).finally(() => {
              this.loading = false;
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm();
          this.$refs["queryForm"].resetFields();
          this.handleQuery();
        },
      }
    };
  
  </script>
  <style lang="scss" scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .listBox_head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
    }
  
  </style>
  